<template>
  <div class="show-next-dialog">
    <MyDialog
      :show.sync="visible"
      dialogWidth="1250px"
      @beforeClose="beforeClose">
      <template #body>
        <div class="next-box">
          <!-- 填写云窍下的档案窍，，， 两层表格展示 -->
          <!-- <ElTable
            refName="fileboxList"
            @pageChange="pageChange"
            :type="1"
            :showHeader="false"
            :data-source="oneRowShow"
            :data-config="tableConfig"
            :total="total"
            :pageSize="pageSize"
            :pageNum="pageNum"
            :isLoading="isLoading">
            <template #boxCode="{ scope }">
              <BoxIconShow :rowInfo="scope.row" />
            </template>

            <template #boxTag="{ scope }">
              <div class="cell-tag">
                <span
                  v-for="(tags, index) in scope.row.boxTagList"
                  :key="index">
                  <el-tag
                    v-if="index <= 5 && tags.tag.length <= 15"
                    class="box-tag mr-5"
                    type="info"
                    size="small"
                    @click="toClickTag(tags)">
                    {{ tags.tag }}
                  </el-tag>
                  <el-tooltip
                    class="item"
                    effect="light"
                    :content="tags.tag"
                    placement="top">
                    <el-tag
                      v-if="index <= 5 && tags.tag.length > 15"
                      class="box-tag mr-5"
                      type="info"
                      size="small"
                      @click="toClickTag(tags)">
                      {{ tags.tag.substring(0, 15) + "..." }}
                    </el-tag>
                  </el-tooltip>
                </span>
                <el-tag
                  type="info"
                  size="small"
                  class="box-tag"
                  @click="goBoxDetail(scope.row)"
                  v-if="scope.row.boxTagList && scope.row.boxTagList.length > 6"
                  >......</el-tag
                >
              </div>
            </template>
            <template #rackCode="{ scope }">
              <span @click="showNext(scope.row)">{{
                scope.row.rackCode && scope.row.rackCode.code
              }}</span>
            </template>

            <template #boxStatus="{ scope }">
              <span>{{
                commonFun.getLabel(boxStatus, scope.row.boxStatus)
              }}</span>
            </template>

            <template #orderStatus="{ scope }">
              <span>{{
                scope.row.orderStatus && scope.row.orderStatus.info
              }}</span>
            </template>

            <template #hasPhoto="{ scope }">
              <div class="img-box">
                <img
                  v-if="scope.row.hasPhoto == 1"
                  @click="goBoxDetail(scope.row)"
                  src="@/assets/images/form/img.png"
                  alt="" />
              </div>
            </template>

            <template #operate="{ scope }">
              <el-button size="mini" @click.native="goBoxDetail(scope.row)"
                >详情</el-button
              >
            </template>

            <template #expand="{ scope }">
							{{scope.row.childRow}}
							{{tableData}}
							<div v-for="cc in scope.row.childRow" :key="cc.date">{{cc.date}}</div>
              <el-table :data="tableData" style="width: 100%">
								<el-table-column prop="date" label="日期" width="180">
								</el-table-column>
								<el-table-column prop="name" label="姓名" width="180">
								</el-table-column>
								<el-table-column prop="address" label="地址">
								</el-table-column>
							</el-table>
            </template>
          </ElTable> -->

          <el-table
            :show-header="false"
            :default-expand-all="true"
            :data="oneRowShow"
            style="width: 100%"
            height="550">
            <!-- height: 200px -->
            <el-table-column type="expand">
              <template slot-scope="props">
                <div class="child-box">
                  <el-table
                    :data="userBoxListShow"
                    style="width: 100%"
                    height="350">
                    <el-table-column
                      prop="rackCode"
                      label="位置编号"
                      width="180">
                      <template slot-scope="scope">
                        {{ "2" }}
                      </template>
                    </el-table-column>

                    <el-table-column prop="rackCode" label="档案窍" width="180">
                      <template slot-scope="scope">
                        <BoxIconShow :rowInfo="scope.row" />
                      </template>
                    </el-table-column>

                    <!-- <el-table-column prop="rackCode" label="标签" width="180">
										<template slot-scope="scope">
										<div class="cell-tag">
											<span
												v-for="(tags, index) in scope.row.boxTagList"
												:key="index">
												<el-tag
													v-if="index <= 5 && tags.tag.length <= 15"
													class="box-tag mr-5"
													type="info"
													size="small"
													@click="toClickTag(tags)">
													{{ tags.tag }}
												</el-tag>
												<el-tooltip
													class="item"
													effect="light"
													:content="tags.tag"
													placement="top">
													<el-tag
														v-if="index <= 5 && tags.tag.length > 15"
														class="box-tag mr-5"
														type="info"
														size="small"
														@click="toClickTag(tags)">
														{{ tags.tag.substring(0, 15) + "..." }}
													</el-tag>
												</el-tooltip>
											</span>
											<el-tag
												type="info"
												size="small"
												class="box-tag"
												@click="goBoxDetail(scope.row)"
												v-if="scope.row.boxTagList && scope.row.boxTagList.length > 6"
												>......</el-tag
											>
										</div>
									</template>
                  </el-table-column> -->

                    <el-table-column prop="name" label="状态" width="180">
                      <template #header>
                        <span>{{ "绑定时间绑定时间绑定时间" }}</span>
                      </template>
                      <template slot-scope="scope">
                        <span>{{
                          commonFun.getLabel(boxStatus, scope.row.boxStatus)
                        }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="bindedOn" label="c" width="180">
                      <template #header>
                        <span>{{ "绑定时间绑定时间绑定时间" }}</span>
                      </template>
                      <template slot-scope="scope">
                        <span>{{ scope.row.bindedOn }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="operate" label="操作">
                      <template #operate="{ scope }">
                        <el-button
                          size="mini"
                          @click.native="goBoxDetail(scope.row)"
                          >详情</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="boxCode" label="档案窍" width="180">
              <template slot-scope="scope">
                <BoxIconShow :rowInfo="scope.row" />
              </template>
            </el-table-column>

            <el-table-column prop="boxTag" label="档案窍" width="180">
              <template slot-scope="scope">
                <div class="cell-tag">
                  <span
                    v-for="(tags, index) in scope.row.boxTagList"
                    :key="index">
                    <el-tag
                      v-if="index <= 5 && tags.tag.length <= 15"
                      class="box-tag mr-5"
                      type="info"
                      size="small"
                      @click="toClickTag(tags)">
                      {{ tags.tag }}
                    </el-tag>
                    <el-tooltip
                      class="item"
                      effect="light"
                      :content="tags.tag"
                      placement="top">
                      <el-tag
                        v-if="index <= 5 && tags.tag.length > 15"
                        class="box-tag mr-5"
                        type="info"
                        size="small"
                        @click="toClickTag(tags)">
                        {{ tags.tag.substring(0, 15) + "..." }}
                      </el-tag>
                    </el-tooltip>
                  </span>
                  <el-tag
                    type="info"
                    size="small"
                    class="box-tag"
                    @click="goBoxDetail(scope.row)"
                    v-if="
                      scope.row.boxTagList && scope.row.boxTagList.length > 6
                    "
                    >......</el-tag
                  >
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="rackCode" label="货位" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.rackCode && scope.row.rackCode.code }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="boxStatus" label="状态" width="180">
              <template slot-scope="scope">
                <span>{{
                  commonFun.getLabel(boxStatus, scope.row.boxStatus)
                }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="name" label="绑定时间" width="180">
              <template slot-scope="scope">
                <span>{{
                  commonFun.getLabel(boxStatus, scope.row.boxStatus)
                }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="operate" label="操作">
              <template #operate="{ scope }">
                <el-button size="mini" @click.native="goBoxDetail(scope.row)"
                  >详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <div slot="title">
        <p>{{ title }}</p>
      </div>
      <div slot="footer"></div>
    </MyDialog>
  </div>
</template>

<script>
import {
  encryption,
  applySubType,
  clarityType,
  boxStatus,
} from "@/utils/dictionary.js";
import ElTable from "@/components/table/ElTable.vue";
import BoxIconShow from "@/components/public-style/BoxIconShow";
export default {
  name: "ShowNextBox",
  components: {
    // ElTable,
    BoxIconShow,
  },
  props: {
    title: {
      type: String,
      default: "查看档案窍",
    },
    isShowNextBox: {
      type: Boolean,
      default: false,
    },
    showRow: {
      type: Object,
      default: () => {},
    },
    userBoxList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      boxStatus: boxStatus,
      userBoxListShow: [],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          tag: "家",
        },
      ],
      tableConfig: [
        {
          label: "",
          prop: "expand",
          type: "expand",
        },
        {
          label: "类别 | 编号",
          prop: "boxCode",
          width: "280",
          selectOption: [
            { label: "云窍 ", value: "2" },
            { label: "档案窍 ", value: "5" },
          ],
        },
        {
          prop: "boxTag",
          label: "标签",
          width: "300",
          showTooltip: false,
        },
        {
          prop: "rackCode",
          label: "货位",
          selectOption: [
            { label: "未绑定货位", value: "0" },
            { label: "已绑定货位", value: "1" },
          ],
        },

        {
          prop: "boxStatus",
          label: "状态",
          selectOption: [
            { label: "正常存储", value: "2" },
            { label: "送出库房", value: "3" },
            { label: "客户签收", value: "4" },
            { label: "送回库房", value: "5" },
            { label: "等待回库", value: "6" },
            { label: "等待对接", value: "7" },
            { label: "等待出库", value: "8" },
            { label: "调阅待回库", value: "9" },
            { label: "调阅待入库", value: "10" },
          ],
        },
        {
          prop: "bindedOn",
          label: "绑定时间",
          selectOption: [],
        },
        {
          prop: "inventoryOn",
          label: "最近盘点时间",
        },
        {
          prop: "hasPhoto",
          label: "",
          width: 38,
        },
        {
          prop: "operate",
          label: "操作",
          width: 100,
        },
      ],
      isLoading: false,
      total: 0,
      pageSize: 10,
      pageNum: 1,
      oneRowShow: [],
    };
  },
  computed: {
    visible: {
      get() {
        return this.isShowNextBox;
      },
      set(val) {
        this.$emit("update:isShowNextBox", val); // visible 改变的时候通知父组件
      },
    },
    // oneRowShow: {
    //   get() {
    //     return [this.showRow];
    //   },
    // },
  },
  watch: {
    isShowNextBox() {
      if (this.isShowNextBox) {
        let cc = this.showRow;
        cc["childRow"] = this.tableData;

        this.oneRowShow = [cc];

        // this.oneRowShow.map(m => {
        // 	m['childRow'] = this.userBoxList
        // })
        this.userBoxListShow = this.userBoxList;
        console.log(
          this.showRow,
          this.userBoxListShow,
          "showRowshowRowshowRowshowRow"
        );
        this.$forceUpdate();
      }
    },
    // 去 窍详情
    goBoxDetail(row) {
      let routeUrl = this.$router.resolve({
        name: "BoxDetail",
        params: { id: row.userBoxId },
      });
      window.open(routeUrl.href, "_blank");
    },
  },
  methods: {
    // 分页数据变动
    pageChange(emitData) {
      this.pageNum = emitData.pageNum;
      this.pageSize = emitData.pageSize;
      this.getUserBoxList();
    },

    // 获得当前云窍下档案窍列表
    getUserBoxList() {
      console.log("获得");
    },
    // 关闭 右侧X
    beforeClose() {
      // this.$emit("closeDialog");
      // this.visible = false
    },
  },
};
</script>
<style lang="scss">
.voucher-box {
  height: 800px;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
}
.child-box {
  padding: 0 0 0 40px;
}
</style>
